<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Text from "./Text.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Base/Typography/Text",
        component: Text,
        tags: ["autodocs"],
        argTypes: {
            type: {
                control: { type: "select" },
                options: ["default", "secondary", "warning", "error", "success", "primary"],
                table: {
                    defaultValue: { summary: "default" },
                },
            },
            size: {
                control: { type: "select" },
                options: ["small", "default", "large"],
            },
        },
        args: {},
    });
</script>

{#snippet tempIcon(name: string)}
    <Icon icon={name} />
{/snippet}

<Story name="Text">
    {#snippet template(args)}
        {#snippet iconLink()}
            {@render tempIcon("iconoir:attachment")}
        {/snippet}
        <Space dir="v" inline align="baseline">
            <Text>Text</Text>
            <Text type="primary" onclick={() => console.log(111)}>Primary</Text>
            <Text type="secondary">Secondary</Text>
            <Text type="warning">Warning</Text>
            <Text type="error">Error</Text>
            <Text type="success">Success</Text>
            <Text type="success" disabled>Disabled</Text>
            <Text mark disabled>Default Mark</Text>
            <Text type="error" mark>Error Mark</Text>
            <Text code>let i = 0;</Text>
            <Text underline>Underline</Text>
            <Text deleted>Deleted</Text>
            <Text strong>Strong</Text>
            <Text link="http://www.baidu.com" icon={iconLink}>链接</Text>
            <Text link="http://www.baidu.com" icon={iconLink} strong underline>链接</Text>
            <Text size="small">Small</Text>
            <!-- <Text size={size}>Normal</Text> -->
            <Text size="large">Large</Text>
            <Text size="large" strong gradient={["45deg", "#9B59B6", "#3498DB"]}>Gradient Color</Text>
        </Space>
    {/snippet}
</Story>

<Story name="Ellipsis">
    {#snippet template(args)}
        <div style="padding-top: 100px; width: 300px;">
            <Text ellipsis={{ showTooltip: true }}>Long Text with ellipsis Long Text with ellipsis Long Text with ellipsis Long Text with ellipsis</Text>
        </div>
    {/snippet}
</Story>
